<template>
  <div class="app-container" >
    <div class="left_replace"v-if="leftVisible"  >

      <el-row style="margin-top: -2%;">
        <el-col :span="2" >
          <el-button type="primary" @click="download">模板下载</el-button>
        </el-col>
        <el-col :span="4">
          <el-upload action="http://211.69.16.108:9001/exampage/uploadExcel" :on-success="uploadSuccess" :on-error="uploadError">
            <el-button type="primary">
              模板导入
            </el-button>
          </el-upload>
        </el-col>
      </el-row>


      <el-form :model="form" ref="form" label-width="100px" class="paper">

        <el-row>
          <el-col>
            <el-form-item class="paper_name"  label="试卷名称："  prop="name">
              <el-input class="paper_name_input"  v-model="form.examPageName"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col>
            <el-form-item :key="index" :label="(index+1) + '、' + item.titleName" v-for="(item,index) in this.titleItems" class="title">


              <el-button type="text" class="add-link-left" size="medium"   @click="addQuestion(item,index)">
                添加题目
              </el-button>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col >
            <el-form-item  label="时间限制：" class="time_limit">
              <el-date-picker  v-model="limitTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" class="paper_date"
                              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col>
            <el-form-item label="建议时长：" prop="suggestTime" class="time_suggest" required>
              <el-input class="paper_suggest_input"  v-model="form.adviceTime" placeholder="分钟"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row class="paper_button" >
          <el-form-item class="paper_button_left" >
            <div class="paper_button_left_div">
              <el-button type="primary" id="submit" style="display: none" @click="submitForm">试卷展示</el-button>
              <label for="submit" class="paper_button_left_div_button">试卷展示</label>
            </div>
              <div class="paper_button_right_div" >
                <el-button  type="primary" style="display: none" id="reset" @click="resetForm">重置</el-button>
                <label for="reset" class="paper_button_right_div_button" >重置</label>
              </div>

            <!--<el-col :span="4">
              <el-button type="success" @click="addTitle">添加标题</el-button>
            </el-col>-->

          </el-form-item>
        </el-row>

      </el-form>
    </div>


    <!-- 右侧动态生成试卷 -->
    <div :class="(leftVisible === true) ? 'right_replace' : 'right'"  v-if="rightVisible">

      <div class="right_container" >
        <div class="right_container_header" >
          <div class="right_container_header_div1" >{{form.examPageName}}</div>
          <div class="right_container_header_div2" >{{"时长:" + form.adviceTime + "分钟"}}</div>
          <div class="right_container_header_div3">{{"总分:" + getTotal()}}</div>
        </div>
        <div class="right_container_body">
          <!-- 选择题渲染 -->
          <div class="right_container_body_choice" v-if="form.choice.length !== 0">
            <div class="right_container_body_choice_div1" >单选题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.choice" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteChoice(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>
                <!--                答案选项 LPH-->
                <div  style="margin-top: 20px;margin-left: 2%;padding-bottom: 1%;width: 100%;display: flex;">
                  <div v-for="(it,ide) in item.items" :key="ide" style="width: 25%;display: flex;height: 30px;">
                    <span class="fontHeight">{{it.prefix+"."}}</span>
                    <span v-html="it.content" class="titleContent"></span>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;font-weight: bold" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"分数:" + item.score}}</div>
                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"答案:" + item.correctArray}}</div>
              </div>
            </div>
          </div>

          <!-- 多选题渲染 -->
          <div class="right_container_body_multChoices" v-if="form.multChoices.length !== 0">
            <div class="right_container_body_choice_div1" >多选题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.multChoices" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteMutiChoices(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>
<!--                答案选项 LPH-->
                <div  style="margin-top: 20px;margin-left: 2%;padding-bottom: 1%;width: 100%;display: flex;">
                  <div v-for="(it,ide) in item.items" :key="ide" style="width: 25%;display: flex;height: 30px;">
                    <span class="fontHeight">{{it.prefix+"."}}</span>
                    <span v-html="it.content" class="titleContent"></span>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;font-weight: bold" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"分数:" + item.score}}</div>
                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"答案:" + item.correctArray}}</div>
              </div>
            </div>
          </div>


          <!-- 判断题渲染 -->
          <div class="right_container_body_judge" v-if="form.judge.length !== 0">
            <div class="right_container_body_choice_div1" >判断题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.judge" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteJudge(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>
                <!--                答案选项 LPH-->
                <div  style="margin-top: 20px;margin-left: 2%;padding-bottom: 1%;width: 100%;display: flex;">
                  <div v-for="(it,ide) in item.items" :key="ide" style="width: 25%;display: flex;height: 30px;">
                    <span class="fontHeight">{{it.prefix+"."}}</span>
                    <span v-html="it.content" class="titleContent"></span>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;font-weight: bold;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"分数:" + item.score}}</div>
                <div style="margin-top: 1%;height: 20px;line-height: 20px;">{{"答案:" + item.correctArray}}</div>
              </div>
            </div>
          </div>

          <!-- 填空题渲染 -->
          <div class="right_container_body_pack" v-if="form.pack.length !== 0">
            <div class="right_container_body_choice_div1" >填空题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.pack" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deletePack(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>

                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;font-weight: bold;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 4px;line-height: 20px;">{{"分数:" + item.score}}</div>

                <div style="margin-top: 4px;line-height: 20px;display: flex;">
                  答案: <span v-html="item.correctArray"></span>
                </div>
              </div>
            </div>
          </div>

          <!-- 简答题渲染 -->
          <div class="right_container_body_bigQuestion" v-if="form.bigQuestions.length !== 0">
            <div class="right_container_body_choice_div1" >简答题</div>
            <div style="margin-left: 6%">
              <div v-for="(item,index) in form.bigQuestions" :key="index" style="padding-top: 3%">

                <el-button type="text" class="right_container_body_choice_set" @click="handleChoiceSet(item,index)">设置分数</el-button>
                <el-button type="text" class="right_container_body_choice_delete" @click="deleteBigQuestion(index)">删除</el-button>

                <div style="height: auto;">
                  <div style="width: 90%;display: flex;position: relative">
                    <div class="right_container_body_choice_div5" style="height: auto;position: absolute;top: 0">{{(index + 1) + '.'}}</div>

                    <div v-html="item.title" class="right_container_body_choice_div5" style="height: auto;margin-left: 15px">
                    </div>
                  </div>
                </div>


                <div style="width: 100%;height: auto;display: flex; ">
                  <div style=" height: auto;line-height: 20px;width: 80%;font-weight: bold;" >{{"解析:"}}
                    <p style="padding-left: 15px"><span v-html="item.analyze"  class="fontHeight"></span></p>

                  </div>
                </div>

                <div style="margin-top: 4px;line-height: 20px;">{{"分数:" + item.score}}</div>

                <div style="margin-top: 4px;line-height: 20px;display: flex;">
                  答案: <span v-html="item.correctArray"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right_foot" v-if="leftVisible !== true">
        <el-button  type="primary" @click="submit">生成</el-button>
        <el-button type="warning" @click="back" style="margin-left: 10%">返回</el-button>
      </div>
    </div>

    <!-- 从题库选择题目弹出框 -->
    <el-dialog title="从题库导入" :visible.sync="questionPage.showDialog"  width="70%">
      <el-form :model="questionPage.queryParam" ref="queryForm" :inline="true">
        <el-form-item label="ID：">
          <el-input v-model="questionPage.queryParam.questionId"  clearable></el-input>
        </el-form-item>
        <el-form-item label="题型：">
          <el-select v-model="questionPage.queryParam.type">
            <el-option v-for="(item,index) in questionTypeEnum" :key="index" :value="item.type" :label="item.typeName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryForm">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="questionPage.tableData"
                @selection-change="handleSelectionChange" border fit highlight-current-row style="width: 100%" :row-key="getRowKey">
        <el-table-column type="selection" align="center" min-width="80" ></el-table-column>
        <el-table-column prop="questionId" label="题目编号" min-width="50"/>
        <el-table-column prop="type" label="题目类型" min-width="80"/>
        <el-table-column prop="title" label="题干" min-width="250"/>
        <el-table-column prop="correctArray" label="答案" min-width="50"/>
        <el-table-column label="默认分值" width="80" prop="score"/>

      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                       :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"/>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="questionPage.showDialog = false">取 消</el-button>
          <el-button type="primary" @click="confirmQuestionSelect">确定</el-button>
     </span>
    </el-dialog>

    <!-- 添加选择题 -->
    <el-dialog title="添加选择题" :visible.sync="addSingleQuestionVisible" width="40%">


      <el-form :model="singleForm" ref="singleForm" label-width="100px" class="single-form">

        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="题干：" prop="title"  >
              <el-input @focus="handleRichEditor(10)" v-model="singleForm.title"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="18" :sm="18" :md="18" :lg="18">
            <el-form-item label="选项：" prop="items" class="items">
              <el-form-item  prop="content" :label="item.prefix" :key="item.prefix"  v-for="(item,index) in singleForm.items"  label-width="20px" class="question-item-label">
                <el-input @focus="handleRichEditor(index+11)"  v-model="item.content"    class="question-item-content-input"/>
              </el-form-item>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="解析：" prop="analyze" class="analyze">
              <el-input @focus="handleRichEditor(15)" v-model="singleForm.analyze" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：" prop="analyze" class="analyze">
              <el-input-number style="width: 40%" v-model="num" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="correctArray" label="正确答案：" prop="correctArray" required>
          <el-radio-group v-model="singleForm.correctArray" style="margin-left: 2%">
            <el-radio  v-for="item in singleForm.items"  :key="item.prefix"  :label="item.prefix">{{item.prefix}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="buttons" >
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <el-button style="margin-left: 5%" type="primary" @click="submitSingleForm">提交</el-button>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <el-button style="margin-left: 5%" @click="cancel">取消</el-button>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8">
              <el-button type="text" size="medium"   @click="addQuestionFromList(1)">
                从题库中导入
              </el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加多选题 -->
    <el-dialog title="添加多选题" :visible.sync="addMultipleQuestionVisible" width="40%">
      <el-form :model="multipleForm" ref="multipleForm" label-width="100px" class="single-form">

        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="题干：" prop="title"  >
              <el-input @focus="handleRichEditor(20)" v-model="multipleForm.title"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="18" :sm="18" :md="18" :lg="18">
            <el-form-item label="选项：" prop="items" class="items">
              <el-form-item  prop="content" :label="item.prefix" :key="item.prefix"  v-for="(item,index) in multipleForm.items"  label-width="20px" class="question-item-label">
                <el-input @focus="handleRichEditor(index+21)"  v-model="item.content"    class="question-item-content-input"/>
                <!--
                              <el-button  type="danger" size="mini" class="question-item-remove" icon="el-icon-delete" @click="questionItemRemove(index)"></el-button>
                -->
              </el-form-item>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="解析：" prop="analyze" class="analyze">
              <el-input @focus="handleRichEditor(25)" v-model="multipleForm.analyze" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：" prop="analyze" class="analyze">
              <el-input-number style="width: 40%" v-model="num" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="correctArray" label="正确答案：" prop="correctArray" >
          <el-checkbox-group v-model="multipleForm.correctArray" style="margin-left: 2%">
            <el-checkbox v-for="item in multipleForm.items" :key="item.prefix" :label="item.prefix" >{{item.prefix}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="buttons" >
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" type="primary" @click="submitMultipleForm">提交</el-button>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" @click="cancel">取消</el-button>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button type="text" size="medium"   @click="addQuestionFromList(2)">
              从题库中导入
            </el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加判断题 -->
    <el-dialog title="添加判断题" :visible.sync="addJudgeQuestionVisible" width="40%">
      <el-form :model="judgeForm" ref="form" label-width="100px" class="single-form">

        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="题干：" prop="title"  >
              <el-input @focus="handleRichEditor(30)" v-model="judgeForm.title"  />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="18" :sm="18" :md="18" :lg="18">
            <el-form-item label="选项：" prop="items" class="items">
              <el-form-item  prop="content" :label="item.prefix" :key="item.prefix"  v-for="(item,index) in judgeForm.items"  label-width="20px" class="question-item-label">
                <el-input disabled v-model="item.content"    class="question-item-content-input"/>
                <!--
                              <el-button  type="danger" size="mini" class="question-item-remove" icon="el-icon-delete" @click="questionItemRemove(index)"></el-button>
                -->
              </el-form-item>
            </el-form-item>
          </el-col>

        </el-row>



        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="解析：" prop="analyze" class="analyze">
              <el-input @focus="handleRichEditor(35)" v-model="judgeForm.analyze" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：" prop="analyze" class="analyze">
              <el-input-number style="width: 40%" v-model="num" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item class="correctArray" label="正确答案：" prop="correctArray" required>
          <el-radio-group v-model="judgeForm.correctArray" style="margin-left: 2%">
            <el-radio  v-for="item in judgeForm.items"  :key="item.prefix"  :label="item.prefix">{{item.prefix}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item class="buttons" >
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" type="primary" @click="submitJudgeForm">提交</el-button>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" @click="cancel">取消</el-button>
          </el-col>
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button type="text" size="medium"   @click="addQuestionFromList(3)">
              从题库中导入
            </el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加填空题 -->
    <el-dialog title="添加填空题" :visible.sync="addFillQuestionVisible" width="40%">
      <el-form :model="fillForm" ref="form" label-width="100px" class="single-form">

        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="题干：" prop="title"  >
              <el-input type="textarea"  @focus="handleRichEditor(40)" v-model="fillForm.title"  />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="解析：" prop="analyze" class="analyze">
              <el-input @focus="handleRichEditor(41)" v-model="fillForm.analyze" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：" prop="analyze" class="analyze">
              <el-input-number style="width: 40%" v-model="num" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="正确答案：" prop="correctArray" class="analyze">
              <el-input type="textarea" @focus="handleRichEditor(45)" v-model="fillForm.correctArray" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item class="buttons" >
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" type="primary" @click="submitFillForm">提交</el-button>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" @click="cancel">取消</el-button>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button type="text" size="medium"   @click="addQuestionFromList(4)">
              从题库中导入
            </el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 添加简答题 -->
    <el-dialog title="添加简答题" :visible.sync="addShotAnswerQuestionVisible" width="40%">
      <el-form :model="shotAnswerForm" ref="form" label-width="100px" class="single-form">

        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="题干：" prop="title"  >
              <el-input type="textarea"  @focus="handleRichEditor(50)" v-model="shotAnswerForm.title"  />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="解析：" prop="analyze" class="analyze">
              <el-input type="textarea" @focus="handleRichEditor(51)" v-model="shotAnswerForm.analyze" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：" prop="analyze" class="analyze">
              <el-input-number style="width: 40%" v-model="num" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row>
          <el-col  :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="正确答案：" prop="correctArray" class="analyze">
              <el-input type="textarea" @focus="handleRichEditor(55)" v-model="shotAnswerForm.correctArray" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item class="buttons" >
          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" type="primary" @click="submitShotAnswerForm">提交</el-button>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button style="margin-left: 5%" @click="cancel">取消</el-button>
          </el-col>

          <el-col :xs="8" :sm="8" :md="8" :lg="8">
            <el-button type="text" size="medium"   @click="addQuestionFromList(5)">
              从题库中导入
            </el-button>
          </el-col>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 修改分数弹出框 -->
    <el-dialog title="修改单选题分数" :visible.sync="updateScoreVisible" width="30%">
      <el-form label-width="100px">
        <el-row>
          <el-col :xs="20" :sm="20" :md="20" :lg="20">
            <el-form-item label="分数：">
              <el-input v-model="num"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="buttons" >
          <el-row>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-button type="primary" @click="submitUpdateScore">提交</el-button>
            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12">
              <el-button @click="cancel">取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 富文本 -->
    <el-dialog :visible.sync="editorVisible" align="center">
      <div class="edit_container">
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption">
        </quill-editor>
      </div>
      <el-row>
        <el-button class="editor_confirm" type="primary" @click="handleRichEditorConfirm(editorId)">确定</el-button>
        <el-button class="editor_cancel" @click="handleRichEditorCancel">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import '../../../assets/css/paper.css'
  import question from '../../../utils/question'
  import { quillEditor } from "vue-quill-editor"; //调用编辑器
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import { addExamPage, queryQuestionPage } from '../../../api';
  export default {
    name: 'PaperCreate',
    data () {
      return {
        /* 标识 */
        index: 0,

        /* 计分器 */
        num: 0,

        /* 添加单选题 */
        addSingleQuestionVisible: false,
        /* 添加多选题 */
        addMultipleQuestionVisible: false,
        /* 添加判断题 */
        addJudgeQuestionVisible: false,
        /* 添加填空题 */
        addFillQuestionVisible: false,
        /* 添加简答题 */
        addShotAnswerQuestionVisible: false,
        /* 修改分数 */
        updateScoreVisible: false,

        /* 富文本 */
        editorId: 0,
        editorVisible: false,
        content: '',
        editorOption: {
          placeholder: 'Hello World'
        },

        /* 添加试卷 */
        limitTime: 0,
        titleItems: [
          {
            titleName: '单选题',
            type: 0,
          },
          {
            titleName: '多选题',
            type: 1,
          },
          {
            titleName: '判断题',
            type: 2,
          },
          {
            titleName: '填空题',
            type: 3,
          },
          {
            titleName: '简答题',
            type: 4,
          },
        ],
        form: {
          examPageId: null,
          examPageName: null,
          createTime: null,
          startTime: 0,
          endTime: 0,
          adviceTime: 0,
          choice: [],
          multChoices:[],
          judge:[],
          pack: [],
          bigQuestions:[],
        },
        /* 单选框 */
        singleForm: {
          id: '',
          type: 1,
          title: '',
          items: [
            { prefix: 'A', content: '' },
            { prefix: 'B', content: '' },
            { prefix: 'C', content: '' },
            { prefix: 'D', content: '' }
          ],
          score: 0,
          analyze: '',
          correctArray: '',
        },
        /* 多选框 */
        multipleForm: {
          id: '',
          type: 2,
          title: '',
          items: [
            { prefix: 'A', content: '' },
            { prefix: 'B', content: '' },
            { prefix: 'C', content: '' },
            { prefix: 'D', content: '' }
          ],
          analyze: '',
          correctArray: [],
          score: 0,
        },
        /* 判断框 */
        judgeForm: {
          id: '',
          type: 3,
          title: '',
          items: [
            { prefix: 'A', content: '是' },
            { prefix: 'B', content: '否' },
          ],
          analyze: '',
          correctArray: '',
          score: 0,
        },
        /* 填空框 */
        fillForm: {
          id: '',
          type: 4,
          title: '',
          items: [],
          analyze: '',
          correctArray: '',
          score: 0,
        },
        /* 简答框 */
        shotAnswerForm: {
          id: '',
          type: 5,
          title: '',
          items: [

          ],
          analyze: '',
          correctArray: '',
          score: 0,
        },
        /* 禁用 */
        disabled: true,


        subjectFilter: null,

        questionPage: {
          multipleSelection: [],
          showDialog: false,
          queryParam: {
            questionId: null,
            type: null,
          },
          tableData: [],
        },
        query: {
          total: 10,
          pageSize: 7,
          currentPage: 1,
        },
        questionTypeEnum: [],
        currentTitleItem: null,

        /* 总分 */
        sum: 0,

        /* 类型 */
        type: 0,

        upScore: {
          index: 0,
          type: 0,
        },
        leftVisible: true,
        rightVisible: true
      }
    },
    created () {
      this.getData();
    },
    mounted(){

    },
    methods: {
      getData(){

        this.questionTypeEnum = question.questionTypes;
      },
      async submitForm() {

        if ((this.form.examPageName === 'null') || (this.form.examPageName === null)
        || (this.limitTime[0] === undefined) || (this.limitTime[0] === null)
                || (this.limitTime[1] === undefined) || (this.limitTime[1] === null)){
          this.$message.error("请将关键信息补充完整!");
        }else if((this.form.choice.length === 0)&&(this.form.multChoices.length === 0) && (this.form.pack.length === 0)
        && (this.form.judge.length === 0) && (this.form.bigQuestions.length === 0)){
          this.$message.error("您未选择题目!");
        }else{
          console.log(this.form);

          this.leftVisible = false;
          this.rightVisible = true;
          console.log(this.leftVisible);
          console.log(this.rightVisible);

        }
      },

      async submit() {
        let st = this.limitTime[0];
        let et = this.limitTime[1];
        let s = new Date(st.replace(new RegExp("-", "gm"), "/")).getTime();
        let p = new Date(et.replace(new RegExp("-", "gm"), "/")).getTime();

        this.form.startTime = s + '';
        this.form.endTime = p + '';
        console.log(typeof this.form.startTime);
        console.log(this.form);

        let exampageId = '';
        let exampageName = this.form.examPageName;
        let createTime = '';
        let startTime = this.form.startTime;
        let endTime = this.form.endTime;
        let adviceTime = this.form.adviceTime;
        let choice = this.form.choice;
        let multChoices = this.form.multChoices;
        let judge = this.form.judge;
        let pack = this.form.pack;
        let bigQuestions = this.form.bigQuestions;

        await addExamPage({
          exampageId,
          exampageName,
          createTime,
          startTime,
          endTime,
          adviceTime,
          choice,
          multChoices,
          judge,
          pack,
          bigQuestions
        });
        this.back();
        this.$message.success("添加成功!");
        this.resetForm();
        await this.$router.push({ path: '/ExamList' });
      },

      back(){
        this.rightVisible = true;
        this.leftVisible = true;
      },

      /* 上传 */
      handleUpload(){

      },
      /* 下载 */
      download(){
        this.$axios.request({
          url: '/exampage/download',
          method: 'get',
          responseType: 'blob',
        }).then(res => {
          const data = res.data;
          let url = window.URL.createObjectURL(data);
          let a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = '试卷模板.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        })
      },

      uploadSuccess(res){
        console.log(res);
        this.$message.success("试卷导入成功!");
        this.form.choice = res.data.examPage.choice;
        this.form.multChoices = res.data.examPage.multChoices;
        this.form.judge = res.data.examPage.judge;
        this.form.pack = res.data.examPage.pack;
        this.form.bigQuestions = res.data.examPage.bigQuestions;

/*        this.leftVisible = false;
        this.rightVisible = true;*/
      },
      uploadError(res){
        console.log(res);
        this.$message.success("导入失败!");
      },


      /* 计算总分 */
      getTotal(){
        let sum = 0;
        for(let i = 0;i < this.form.choice.length;i++){
          sum += parseInt(this.form.choice[i].score);
        }
        for(let i = 0;i < this.form.multChoices.length;i++){
          sum += parseInt(this.form.multChoices[i].score);
        }
        for(let i = 0;i < this.form.judge.length;i++){
          sum += parseInt(this.form.judge[i].score);
        }
        for(let i = 0;i < this.form.pack.length;i++){
          sum += parseInt(this.form.pack[i].score);
        }
        for(let i = 0;i < this.form.bigQuestions.length;i++){
          sum += parseInt(this.form.bigQuestions[i].score);
        }

        return sum;
      },

      /* 添加题目 */
      addQuestion(item,index){
        /* 根据传入的index,弹出什么样的弹出框 */
        switch (index+1) {
          case 1:
            this.addSingleQuestionVisible = true;
            break;
          case 2:
            this.addMultipleQuestionVisible = true;
            break;
          case 3:
            this.addJudgeQuestionVisible = true;
            break;
          case 4:
            this.addFillQuestionVisible = true;
            break;
          case 5:
            this.addShotAnswerQuestionVisible = true;
            break;
          default:
            break;
        }
      },
      /* 从题库中导入题目 */
      async addQuestionFromList(index) {
        this.type = index;
        let current = this.query.currentPage;
        let size = this.query.pageSize;

        const response = await queryQuestionPage({ type: index, current: current, size: size });
        console.log(response);
        this.questionPage.tableData = response.records;
        this.query.total = response.total;

        switch (index) {
          case 1:
            this.addSingleQuestionVisible = false;
            break;
          case 2:
            this.addMultipleQuestionVisible = false;
            break;
          case 3:
            this.addJudgeQuestionVisible = false;
            break;
          case 4:
            this.addFillQuestionVisible = false;
            break;
          case 5:
            this.addShotAnswerQuestionVisible = false;
            break;
        }
        /* 这里可以通过不同的名字,来筛选题库 */
        this.questionPage.showDialog = true
      },
      async queryForm() {


        let id = this.questionPage.queryParam.questionId;
        let type = this.questionPage.queryParam.type;

        console.log(id + "..." + type)
        const data = await queryQuestionPage({ id, type, current: 1, size: 7 });

        this.questionPage.tableData = data.records;
        this.query.total = data.total;
        console.log(data);
        this.query.currentPage = 1;
      },
      confirmQuestionSelect () {
        for(let i = 0;i < this.questionPage.multipleSelection.length;i++){
          switch (this.questionPage.multipleSelection[i].type) {
            case 1:
              this.form.choice.push(this.questionPage.multipleSelection[i]);
              break;
            case 2:
              this.form.multChoices.push(this.questionPage.multipleSelection[i]);
              break;
            case 3:
              this.form.judge.push(this.questionPage.multipleSelection[i]);
              break;
            case 4:
              this.form.pack.push(this.questionPage.multipleSelection[i]);
              break;
            case 5:
              this.form.bigQuestions.push(this.questionPage.multipleSelection[i]);
              break;
            default:
              break;
          }
        }

        this.questionPage.showDialog = false
      },
      /* 删除单选题题目 */
      deleteChoice(id){
        // 遍历choice,删除
        let newChoice = [];
        let j = 0;
        for(let i = 0;i < this.form.choice.length;i++){
          if(!(id === i)){
            newChoice[j] = this.form.choice[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.choice = newChoice;
      },

      /* 删除多选题 */
      deleteMutiChoices(id){
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for(let i = 0;i < this.form.multChoices.length;i++){
          if(!(id === i)){
            newChoice[j] = this.form.multChoices[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.multChoices = newChoice;
      },

      handleChoiceSet(item,index){
        this.updateScoreVisible = true;
        console.log(item);
        console.log(index);
        console.log(item.id === null);
        if(item.id === null){
          this.upScore.index = index;
          this.upScore.type = item.type;
          this.index = 1;
        }else{
          this.index = item.id;
        }
        console.log(this.index);
        console.log(this.upScore);
      },
      submitUpdateScore(){
        let id = this.index;
        let type = this.upScore.type;
        let index = this.upScore.index;
        console.log(id);
        console.log(type);
        console.log(index);
        if(id === 0){
          switch (type+1) {
            case 1:
              this.form.choice[index].score = this.num;
              break;
            case 2:
              this.form.multChoices[index].score = this.num;
              break;
            case 3:
              this.form.judge[index].score = this.num;
              break;
            case 4:
              this.form.pack[index].score = this.num;
              break;
            case 5:
              this.form.bigQuestions[index].score = this.num;
              break;
            default:
              break;
          }
        }else{
          for(let i = 0;i < this.form.choice.length;i++){
            if(this.form.choice[i].id === id){
              this.form.choice[i].score = this.num;
              break;
            }
          }

          for(let i = 0;i < this.form.multChoices.length;i++){
            if(this.form.multChoices[i].id === id){
              this.form.multChoices[i].score = this.num;
              break;
            }
          }

          for(let i = 0;i < this.form.judge.length;i++){
            if(this.form.judge[i].id === id){
              this.form.judge[i].score = this.num;
              break;
            }
          }

          for(let i = 0;i < this.form.pack.length;i++){
            if(this.form.pack[i].id === id){
              this.form.pack[i].score = this.num;
              break;
            }
          }

          for(let i = 0;i < this.form.bigQuestions.length;i++){
            if(this.form.bigQuestions[i].id === id){
              this.form.bigQuestions[i].score = this.num;
              break;
            }
          }
        }


        this.$message.success("修改分数成功!");
        this.updateScoreVisible = false;
      },

      /* 删除判断题 */
      deleteJudge(id){
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for(let i = 0;i < this.form.judge.length;i++){
          if(!(id === i)){
            newChoice[j] = this.form.judge[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.judge = newChoice;
      },

      /* 删除填空题 */
      deletePack(id){
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for(let i = 0;i < this.form.pack.length;i++){
          if(!(id === i)){
            newChoice[j] = this.form.pack[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.pack = newChoice;
      },

      /* 删除简答题 */
      deleteBigQuestion(id){
        // 遍历choice,删除
        console.log(id);
        let newChoice = [];
        let j = 0;
        for(let i = 0;i < this.form.bigQuestions.length;i++){
          if(!(id === i)){
            newChoice[j] = this.form.bigQuestions[i];
            j++;
          }
        }
        console.log(newChoice);
        this.form.bigQuestions = newChoice;
      },
      getRowKey(row){
        return row.questionId;
      },
      handleSelectionChange (val) {
        this.questionPage.multipleSelection = val
        console.log(val);
      },
      handleScore(id,scores){
        let score = parseInt(scores);
        for(let i = 0;i < this.questionPage.multipleSelection.length;i++){
          if(this.questionPage.multipleSelection[i].questionId === id){
            this.questionPage.multipleSelection[i].score = score;
          }
        }
      },
      resetForm () {
        this.limitTime = '';
        this.form = {
          examPageId: null,
          examPageName: null,
          createTime: null,
          startTime: 0,
          endTime: 0,
          adviceTime: 0,
          choice: [],
          multChoices:[],
          judge:[],
          pack: [],
          bigQuestions:[],
        }
        this.$message.success("重置成功!");
      },

      /* 更换当前页 */
      async handlePageChange(val) {

        let size = this.query.pageSize;
        let type = this.type;

        const res = await queryQuestionPage({ type: type, current: val, size: size });
        console.log(res);

        this.questionPage.tableData = res.records;

        /*this.getData();*/
      },

      judge(){
        if (this.form.choice.length >0 || this.form.multChoices.length >0 || this.form.judge.length >0 || this.form.pack.length >0 || this.form.bigQuestions.length >0){
          return true;
        }else if(this.leftVisible === true){
          return false;
        }else{
          return false;
        }
      },

      /* 日期格式化 */
      dateFormat(time){
        let date = new Date(time);
        let year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
          * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
          * */
        let month =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        // 拼接
        return (
          year +
          "-" +
          month +
          "-" +
          day
        );
      },

      /* 关闭富文本 */
      handleClose(){
        this.$confirm("确认关闭?")
          .then(_ => {
          })
          .catch(_ => {

          });
      },

      /* 富文本显示 */
      handleRichEditor(id){
        this.editorId = id;
        switch (id) {
          case 10:
            this.content = this.singleForm.title;
            break;
          case 15:
            this.content = this.singleForm.analyze;
            break;
          case 11:
            this.content = this.singleForm.items[0].content;
            break;
          case 12:
            this.content = this.singleForm.items[1].content;
            break;
          case 13:
            this.content = this.singleForm.items[2].content;
            break;
          case 14:
            this.content = this.singleForm.items[3].content;
            break;
          case 20:
            this.content = this.multipleForm.title;
            break;
          case 25:
            this.content = this.multipleForm.analyze;
            break;
          case 21:
            this.content = this.multipleForm.items[0].content;
            break;
          case 22:
            this.content = this.multipleForm.items[1].content;
            break;
          case 23:
            this.content = this.multipleForm.items[2].content;
            break;
          case 24:
            this.content = this.multipleForm.items[3].content;
            break;
          case 30:
            this.content = this.judgeForm.title;
            break;
          case 35:
            this.content = this.judgeForm.correctArray;
            break;
          case 40:
            this.content = this.fillForm.title;
            break;
          case 41:
            this.content = this.fillForm.analyze;
            break;
          case 45:
            this.content = this.fillForm.correctArray;
            break;
          case 50:
            this.content = this.shotAnswerForm.title;
            break;
          case 51:
            this.content = this.shotAnswerForm.analyze;
            break;
          case 55:
            this.content = this.shotAnswerForm.correctArray;
            break;
          default:
            break;
        }
        this.editorVisible = true;
      },

      /* 富文本确认 */
      handleRichEditorConfirm(id){
        console.log(id);
        switch (id) {
          case 10:
            this.singleForm.title = this.content;
            break;
          case 15:
            this.singleForm.analyze = this.content;
            break;
          case 11:
            this.singleForm.items[0].content = this.content;
            break;
          case 12:
            this.singleForm.items[1].content = this.content;
            break;
          case 13:
            this.singleForm.items[2].content = this.content;
            break;
          case 14:
            this.singleForm.items[3].content = this.content;
            break;
          case 20:
            this.multipleForm.title = this.content;
            break;
          case 25:
            this.multipleForm.analyze = this.content;
            break;
          case 21:
            this.multipleForm.items[0].content = this.content;
            break;
          case 22:
            this.multipleForm.items[1].content = this.content;
            break;
          case 23:
            this.multipleForm.items[2].content = this.content;
            break;
          case 24:
            this.multipleForm.items[3].content = this.content;
            break;
          case 30:
            this.judgeForm.title = this.content;
            break;
          case 35:
            this.judgeForm.analyze = this.content;
            break;
          case 40:
            this.fillForm.title = this.content;
            break;
          case 41:
            this.fillForm.analyze = this.content;
            break;
          case 45:
            this.fillForm.correctArray = this.content;
            break;
          case 50:
            this.shotAnswerForm.title = this.content;
            break;
          case 51:
            this.shotAnswerForm.analyze = this.content;
            break;
          case 55:
            this.shotAnswerForm.correctArray = this.content;
            break;
          default:
            break;
        }
        this.editorVisible = false;
      },

      handleRichEditorCancel() {
        this.editorVisible = false;
      },

      /* 提交单选表单 */
      submitSingleForm(){
        this.singleForm.score = this.num;
        let singleQuestion = {
          "title": this.singleForm.title,
          "analyze": this.singleForm.analyze,
          "items": this.singleForm.items,
          "score": this.singleForm.score,
          "correctArray": this.singleForm.correctArray,
          "type": 1
        }
        this.form.choice.push(singleQuestion);
        this.addSingleQuestionVisible = false;
      },

      /* 提交多选表单 */
      submitMultipleForm(){
        this.multipleForm.score = this.num;
        let multipleQuestion = {
          "title": this.multipleForm.title,
          "analyze": this.multipleForm.analyze,
          "items": this.multipleForm.items,
          "score": this.multipleForm.score,
          "correctArray": this.multipleForm.correctArray,
          "type": 2
        }
        this.form.multChoices.push(multipleQuestion);
        this.addMultipleQuestionVisible = false;
      },

      /* 提交判断表单 */
      submitJudgeForm(){
        this.judgeForm.score = this.num;
        let judgeQuestion = {
          "title": this.judgeForm.title,
          "analyze": this.judgeForm.analyze,
          "items": this.judgeForm.items,
          "score": this.judgeForm.score,
          "correctArray": this.judgeForm.correctArray,
          "type": 3
        }
        this.form.judge.push(judgeQuestion);
        this.addJudgeQuestionVisible = false;
      },
      /* 提交填空表单 */
      submitFillForm(){
        this.fillForm.score = this.num;
        let fillQuestion = {
          "title": this.fillForm.title,
          "analyze": this.fillForm.analyze,
          "items": this.fillForm.items,
          "score": this.fillForm.score,
          "correctArray": this.fillForm.correctArray,
          "type": 4
        }
        this.form.pack.push(fillQuestion);
        this.addFillQuestionVisible = false;
      },
      /* 提交简答表单 */
      submitShotAnswerForm(){
        this.shotAnswerForm.score = this.num;
        let shotAnswerQuestion = {
          "title": this.shotAnswerForm.title,
          "analyze": this.shotAnswerForm.analyze,
          "items": this.shotAnswerForm.items,
          "score": this.shotAnswerForm.score,
          "correctArray": this.shotAnswerForm.correctArray,
          "type": 5
        }
        this.form.bigQuestions.push(shotAnswerQuestion);
        this.addShotAnswerQuestionVisible = false;
      },
      cancel(){
        this.addSingleQuestionVisible = false;
        this.addMultipleQuestionVisible = false;
        this.addJudgeQuestionVisible = false;
        this.addFillQuestionVisible = false;
        this.addShotAnswerQuestionVisible = false;

      },


    },
    components:{
      quillEditor
    },
    watch:{
      editorVisible() {
        if (this.editorVisible === false) {
          this.content = '';
        }
      },
      addSingleQuestionVisible(){
        let singleForm = {
            id: null,
            questionType: 1,
            title: '',
            items: [
              { prefix: 'A', content: '' },
              { prefix: 'B', content: '' },
              { prefix: 'C', content: '' },
              { prefix: 'D', content: '' }
            ],
            score: 0,
            analyze: '',
            correctArray: '',
          };
        if(this.addSingleQuestionVisible === false){
          this.singleForm = singleForm;
        }
      },
      addMultipleQuestionVisible(){
        let multipleForm = {
          id: null,
            questionType: 1,
            title: '',
            items: [
            { prefix: 'A', content: '' },
            { prefix: 'B', content: '' },
            { prefix: 'C', content: '' },
            { prefix: 'D', content: '' }
          ],
            analyze: '',
            correctArray: [],
            score: 0,
        };
        if(this.addMultipleQuestionVisible === false){
          this.multipleForm = multipleForm;
        }
      },
      addJudgeQuestionVisible(){
        let judgeForm = {
          id: null,
            questionType: 1,
            title: '',
            items: [
            { prefix: 'A', content: '是' },
            { prefix: 'B', content: '否' },
          ],
            analyze: '',
            correctArray: '',
            score: 0,
        };
        if(this.addJudgeQuestionVisible === false){
          this.judgeForm = judgeForm;
        }
      },
      addFillQuestionVisible(){
        let fillForm = {
          id: null,
          type: 4,
          title: '',
          items: [],
          analyze: '',
          correctArray: '',
          score: 0,
        };
        if(this.addFillQuestionVisible === false){
          this.fillForm = fillForm;
        }
      },
      addShotAnswerQuestionVisible(){
        let shotAnswerForm = {
          id: null,
            questionType: 1,
            title: '',
            items: [

          ],
            analyze: '',
            correctArray: '',
            score: 0,
        };
        if(this.addShotAnswerQuestionVisible === false){
          this.shotAnswerForm = shotAnswerForm;
        }
      }
    }
  };

</script>

<style scoped>

  .app-container{
    display: flex;
    width: 100%;
  }

  .left{
    float: left;
    width: 80%;
    display: inline-block;
    padding: 25px 20px 0px 50px;
    margin-left: 10%;
  }

  .left_replace {
    float: left;
    width: 49%;
    display: inline-block;
    padding: 25px 20px 0px 50px;
    margin-left: 2%;
  }

  .right_replace{
    float: right;
    width: 51%;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
  }

  .paper_name{
    margin-bottom: 5%;
  }

  .paper_name_input{
    width: 80%;
  }

  .paper_suggest_input{
    width: 80%;
  }

  .paper_button{
    height: 34px;
    margin-top: 2%;
    margin-left: 10%;
  }

  .paper_button_left{
    display: flex;
  }

  .paper_button_left_div{
    display: inline-block;
    width: 100px;
  }

  .paper_button_left_div_button{
    border: double 1px transparent;
    width: 100%;
    display: block;
    text-align: center;
    border-radius: 0.5em;
    background-color: #00d1b2;
  }

  .paper_button_right_div{
    display: inline-block;
    width: 100px;
    margin-left: 100px;
  }

  .paper_button_right_div_button{
    border: double 1px transparent;
    width: 100%;
    display: block;
    text-align: center;
    border-radius: 0.5em;
    background-color: white;
  }

  .paper_date{
    width: 70%;
  }

  .paper{
    margin-top: 2%;
    width: 100%;
  }

  .title{
    margin-top: 0%;
    padding-bottom: 0%;
    margin-left: 20%;
    position: relative;
  }

  .time_limit{
    margin-top: 3%;
  }

  .time_suggest{
    margin-top: 2%;
  }

  .add-link-left{
    position: absolute;
    margin-left: 30%;
  }


  .import-link-left{
    width: 14%;
    margin-left: 85%;
    float: right;
  }

  @media screen and (max-width: 650px){

  }
  /* 表格分页 */
  .pagination {
    margin: 20px 0;
    text-align: right;
  }

  .right{
    float: right;
    width: 100%;
    height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
  }

  .right_container{
    width: 100%;
  }

  .right_container_header{
    margin: 5% auto;
    width: 100%;
    text-align: center;
  }

  .right_container_header_div1{
    font-size: 20px;
  }

  .right_container_header_div2{
    margin-top: 1%;
  }

  .right_container_header_div3{
    margin-top: 1%;
  }

  .right_container_body_choice_div1{
    margin-left: 5%;
    font-size: 20px;
  }

  .right_container_body_choice_div2{
    margin-left: 6%;
  }

  .right_container_body_choice_div3{
    padding-top: 3%;
  }

  .right_container_body_choice_div4{
    display: flex;
  }

  .right_container_body_choice_div5{
    height: 20px;
    line-height: 20px;
    align-self: center;

  }

  .right_container_body_choice_div6{
    height: 20px;
    line-height: 20px;
    align-self: center;
  }

  .right_container_body_choice_set {
    margin-left: 0%;
    font-size: 16px;
    text-decoration: underline;
  }

  .right_container_body_choice_delete{

    margin-left: 3%;
    font-size: 16px;
    color: red;
    text-decoration: underline;
  }

  .right_container_body_choice_div7{
    margin-left: 1%;padding-bottom: 1%;margin-top: 2%;width: 100%;display: flex;
  }

  .right_container_body_choice_div8{
    width: 25%;display: flex;
  }

  .right_container_body_multChoices{
    padding-top: 5%;
  }

  .right_container_body_judge{
    padding-top: 5%;
  }

  .right_container_body_pack{
    padding-top: 5%;
  }

  .right_container_body_bigQuestion{
    padding-top: 5%;
  }

  .right_foot{
    margin-left: 35%;
    margin-top: 5%;
  }

  .titleContent{
    word-break: break-word;
    display: -webkit-box;
    height: 20px;
    line-height: 20px;
  }

  .fontHeight{
    height: 20px;
    line-height: 20px;
  }



</style>
